<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格4-滚动时表头固定</title>

    <style>
      table
        {
            border-collapse: collapse;
            text-align: center;
        }
        table td, table th
        {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }
        table thead th
        {
            background-color: #CCE8EB;
            width: 100px;
        }
        table tr:nth-child(odd)
        {
            background: #fff;
        }
        table tr:nth-child(even)
        {
            background: #F5FAFA;
        }

        table thead{
          position: sticky;
          top: 0;
        }

        .box{
          height: 100px;
          border: 1px solid purple;
          overflow: auto;
        }
    

    </style>
  </head>

  <body>
    <div class="box">
      <table class="test" cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="50px" />
          <col width="50" />
          <col width="50" />
          <col width="50" />
          <col width="50" />
          <col />
          <col width="200" />
          <col width="50" />
        </colgroup>
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>职位</th>
            <th>描述</th>
            <th>创建时间</th>
            <th>状态</th>
          </tr>
        </thead>

        <tr>
          <td>1</td>
          <td>张三</td>
          <td>20</td>
          <td>男</td>
          <td>研发</td>
          <td>描述很长</td>
          <td>2019-12-10 08:12:32</td>
          <td>停用</td>
        </tr>
        <tr>
          <td>2</td>
          <td>李四</td>
          <td>21</td>
          <td>男</td>
          <td>测试</td>
          <td>描述22222</td>
          <td>2020-10-20 05:22:05</td>
          <td>启用</td>
        </tr>
        <tr>
          <td>3</td>
          <td>李四</td>
          <td>21</td>
          <td>男</td>
          <td>测试</td>
          <td>描述22222</td>
          <td>2020-10-20 05:22:05</td>
          <td>启用</td>
        </tr>
        <tr>
          <td>4</td>
          <td>李四</td>
          <td>21</td>
          <td>男</td>
          <td>测试</td>
          <td>描述22222</td>
          <td>2020-10-20 05:22:05</td>
          <td>启用</td>
        </tr>
      </table>
    </div>
  </body>
</html>
